/*
  基于el-select的远程搜索多选组件
  
  使用：替换本组件中的字段以及接口
  在使用本组件的地方定义  <associativeInput @ass-inputvalue="assInputValue"></associativeInput>
  方法用来接收本组件选中的选项
*/
<template>
  <el-select
    v-model="value"
    filterable
    remote
    reserve-keyword
    clearable
    multiple
    placeholder="请输入代码/公司名称"
    :remote-method="querySearchAsync"
    :loading="loading"
    @change="valueChange"
  >
    <el-option
      v-for="item in options"
      :key="item.code"
      :value="item.code"
      :label="item.cn_short_name"
    >
      <span style="color: #8492a6; font-size: 13px; float: left">{{
        item.code
      }}</span>
      <span style="color: #8492a6; margin-left: 20px; font-size: 13px">{{
        item.cn_short_name
      }}</span>
    </el-option>
  </el-select>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      value: [],
      c_code: "",
      options: []
    };
  },
  mounted() {
    this.querySearchAsync();
  },
  methods: {
    async querySearchAsync(query) {
      this.loading = true;
      try {
        const { data } = await this.$requestData.xyfxCodeList({
          keyword: query
        });
        this.options = data;
      } finally {
        this.loading = false;
      }
    },
    valueChange(val) {
      this.$emit("ass-inputvalue", val);
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
